<template>
  <div style="margin-left:130px;margin-top:0px;">
    <div style="clear:both"></div>
    <div style="margin-bottom:40px;overflow:hidden">
      <span class="tips1" style="float:left;">1</span>
      <div style="float:left">
        <span style="display:block; margin-bottom:10px;">添加体验者：</span>
        <div style="width:500px;">注意：您需要在将自己的小程序发布给公众之前，微信官方审核通过后方可将自己的小程序发布。审核通过前，请添加体验者，扫码体验相关版本。</div>
        <div style="margin-top:25px;"><el-button type="primary" @click="open3">添加体验者</el-button></div>
        <div style="width:500px; margin-bottom:10px; display:none;">
          <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 4}" placeholder="请输入微信帐号，多个已‘;’分割" v-model="textarea" > </el-input>
        </div>
        <div style="width:150px;margin:20px auto; display:none">
          <el-button  @click="tijiao('del')" v-if="getAuth(0)">删除</el-button>
          <el-button type="primary" @click="tijiao('add')" v-if="getAuth(1)">添加</el-button>
        </div>
      </div>
      <div v-show="expcode">
        <div style="float:left; line-height:30px;margin-left:60px;margin-right:20px">
          扫码体验：
        </div>
        <div style="float:left;">
          <img class="eximg" style="width:170px;height:170px;" :src="url">
        </div>
      </div>
    </div>
    <div style="margin-bottom:40px;width:600px;"><span class="tips1">2</span>微信审核进度：<span v-html="audit" style="width: 450px; display: inline-block;vertical-align:top"></span></div>
    <div style="width:600px">
        <span style="display:block; margin-bottom:10px; float:left; line-height:34px;"><span class="tips1">3</span>发布小程序：</span>
        <div style="float:left;"><el-button type="primary" :disabled="disabled" @click="publishMessageBox">一键发布</el-button></div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import {buttonAuth} from '../../smartlight/common/js/util.js'
  export default {
    data () {
      return {
        textarea: '',
        audit: '未知状态',
        disabled: true,
        companytype: 1,
        adminButtons: [633, 634], // 依次为删除、添加
        ebookingButtons: [633, 634],
        mdButtons: [],
        expcode: false,
        url: ''
      }
    },
    methods: {
      open3 () {
        this.$prompt('请输入体验者微信号：', '提示', {
          confirmButtonText: '新增',
          cancelButtonText: '取消',
          inputPattern: /^[a-zA-Z]{1}[-_a-zA-Z0-9]{5,19}$/,
          inputErrorMessage: '微信号格式不正确！'
        }).then(({ value }) => {
          // alert(value)
          // this.$message({
          //   type: 'success',
          //   message: '你的邮箱是: ' + value
          // })
          this.textarea = value
          this.tijiao('add')
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '取消输入'
          // })
        })
      },
      // 获取页面按钮权限
      getAuth (index) {
        return buttonAuth(index, this.companytype, this.adminButtons, this.ebookingButtons, this.mdButtons)
      },
      tijiao (op) {
        if (this.textarea) {
          this.$http.post('/smartLight/openweixin/updatety.htm', {shopid: sessionStorage.getItem('shopId'), accounts: this.textarea, op: op}).then(response => {
            var resBody = response.body
            if (resBody.res === 0) {
              this.$message({
                showClose: true,
                message: '操作成功！',
                type: 'success'
              })
            } else {
              this.$message({
                showClose: true,
                message: resBody.errmsg,
                type: 'error'
              })
            }
          })
        } else {
          this.$message({
            showClose: true,
            message: '请输入微信号！',
            type: 'error'
          })
        }
      },
      publishMessageBox () {
        this.$confirm('此操作为线上发布, 请确认数据是否配置完整。', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // })
          this.publish()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消发布'
          })
        })
      },
      publish () {
        this.$http.post('/smartLight/openweixin/publish.htm', {shopid: sessionStorage.getItem('shopId')}).then(response => {
          var resBody = response.body
          if (resBody.res === 1) {
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
          } else {
            // this.audit = resBody.errorMsg
            // if (this.audit === '审核成功') {
            //   this.disabled = false
            // }
            this.$message({
              showClose: true,
              message: '操作成功',
              type: 'success'
            })
          }
        })
      }
    },
    mounted () {
      this.$http.post('/smartLight/openweixin/getAudit.htm', {shopid: sessionStorage.getItem('shopId')}).then(response => {
        var resBody = response.body
        if (resBody.res === 1) {
          this.$message({
            showClose: true,
            message: resBody.errmsg,
            type: 'error'
          })
        } else {
          this.audit = resBody.errorMsg
          if (this.audit === '审核成功') {
            this.disabled = false
          }
        }
      })
      this.$http.post('/smartLight/openweixin/getExpcode.htm', {id: sessionStorage.getItem('shopId')}).then(response => {
        var resBody = response.body
        if (resBody.res === 0) {
          this.expcode = true
          this.url = resBody.url
        }
      })
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
.tips1{display:inline-block;width:20px;height:20px;line-height:20px;color:#fff;text-align:center;background-color:#20A0FF;border-radius:20px;margin-right:30px}
</style>
